<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <el-form
      ref="form"
      :model="form"
      :inline="true">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item class="button">
          <el-button type="primary"
          @click="onSubmit"
          :disabled="isLoading">查询</el-button>
          <el-button
          @click="onReset"
          :disabled="isLoading">重置</el-button>
      </el-form-item>
      </el-form>
    </div>
    <el-button @click="handleAdd">添加角色</el-button>
    <!-- 数据展示 -->
    <el-table
      :data="roles"
      style="width: 100%"
      v-loading="isLoading"
      border>
      <el-table-column
        label="编号"
        width="100"
        type="index">
      </el-table-column>
      <el-table-column
        prop="name"
        label="角色名称">
      </el-table-column>
      <el-table-column
        prop="description"
        label="描述">
      </el-table-column>
      <!-- 时间 -->
      <el-table-column
        label="添加时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createdTime | dateFormat}}</span>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="$router.push({
              name: 'allocMenu',
              params: {
                roleId: scope.row.id
              }
            })">分配菜单</el-button>
            <el-button
            size="mini"
            @click="$router.push({
              name: 'allocResource',
              params: {
                roleId: scope.row.id
              }
            })">分配资源</el-button>
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.current"
      :page-sizes="[5, 10, 20]"
      :page-size="form.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalCount"
      :disabled="isLoading">
    </el-pagination>
    <!-- 添加和编辑对话框 -->
    <el-dialog
      :title="isEdit ? '编辑角色' : '添加角色'"
      :visible.sync="dialogVisible"
      width="30%"
      center>
      <!-- 将添加和编辑功能封装到组件中 -->
      <create-or-edit
      :is-edit="isEdit"
      :role-id="roleId"
      @success="onSuccess"
      @cancel="onCancel"
      v-if="dialogVisible"></create-or-edit>
    </el-dialog>
  </el-card>
</template>

<script>
import { getRoles, deleteRole } from '@/services/role'
import CreateOrEdit from './CreateOrEdit'

export default {
  name: 'RoleList',
  components: {
    CreateOrEdit
  },
  data () {
    return {
      form: {
        current: 1,
        size: 10,
        name: ''
      },
      totalCount: 0,
      isLoading: false,
      roles: [],
      // Dialog对话框
      dialogVisible: false,
      isEdit: false,
      roleId: ''
    }
  },
  methods: {
    onSubmit () {
      this.form.current = 1
      this.loadRoles()
    },
    onReset () {
      this.$refs.form.resetFields()
    },
    // 请求角色列表数据
    async loadRoles () {
      this.isLoading = true
      const { data } = await getRoles(this.form)
      this.roles = data.data.records
      this.totalCount = data.data.total
      this.isLoading = false
    },
    // 删除角色列表数据
    handleDelete (role) {
      this.$confirm(`确认删除角色:${role.name}`, '删除提示')
        .then(async () => {
          const { data } = await deleteRole(role.id)
          if (data.code === '000000') {
            this.$message.success('删除成功')
            this.loadRoles()
          }
        }).catch(err => {
          if (err && err.response) {
            this.$message.error('删除失败,请重试')
          } else {
            this.$message.info('取消删除')
          }
        })
    },
    // 分页功能
    handleSizeChange (val) {
      this.form.size = val
      this.form.current = 1
      this.loadRoles()
    },
    handleCurrentChange (val) {
      this.form.current = val
      this.loadRoles()
    },
    // Dialog对话框确定关闭
    onSuccess () {
      this.dialogVisible = false
      this.loadRoles()
    },
    // Dialog对话框取消
    onCancel () {
      this.dialogVisible = false
    },
    // 添加角色按钮
    handleAdd () {
      this.dialogVisible = true
      this.isEdit = false
    },
    // 编辑角色按钮
    handleEdit (role) {
      this.dialogVisible = true
      this.isEdit = true
      this.roleId = role.id
    }
  },
  created () {
    this.loadRoles()
  },
  // 过滤器
  filters: {
    dateFormat (date) {
      date = new Date(date)
      return `
        ${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}
        ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}
      `
    }
  }
}
</script>

<style lang='scss' scoped>
.el-table {
  margin-top: 20px;
}
.button {
  float: right;
}
</style>
